<template>
	<view class="page">
		<view class='feedback-title'>
			<text>图片(大小10M以下)</text>
		</view>
		<view class="feedback-body feedback-uploader">
			<view class="uni-uploader">
				<view class="uni-uploader-head">
					<view class="uni-uploader-title">点击预览图片</view>
					<view class="uni-uploader-info">{{imageList.length}}/9</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
							</view>
							<view class="file-remove" @click="remove(index,$event)">×</view>
						</block>
					</view>
					<view class="uni-uploader__input-box">
						<view class="uni-uploader__input" @tap="chooseImg"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const qiniuUploader = require("../../common/qiniuUploader");
	import {getUrl} from '../../common/oss';
	import {getBasicUrl} from "@/common/env.config";
	// 初始化七牛相关参数
// 	function initQiniu() {
// 		var options = {
// 			region: 'SCN', // 华北区
// 			uptokenURL: getBasicUrl()+"/api/tool/oss",
// 			domain: 'http://p6urwinfd.bkt.clouddn.com',
// 			shouldUseQiniuFileName: false
// 		};
// 		qiniuUploader.init(options);
// 	}
	import {getGallery,addGallery} from "@/api/ucenter/index";
	import {
		mapGetters,mapState 
	} from 'vuex';
	export default {
		data: {
			imageList: [],
			
		},
		onUnload(){
			this.imageList = [];
			
		},
		onLoad() {
			getGallery(this.userId).then(response =>  {
				for(var i= 0; i < response.length; i++) {
						this.imageList.push(getUrl(response[i].pictureKey))
				}
				
			});
		},
		computed: {
			...mapGetters(
				["userId"],
			),
		},
		
		
		methods: {
			chooseImg() { //选择图片
			var that = this;
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: "compressed",
					count: 9,
					success: (res) => {
						 res.tempFilePaths;
						 that.uploadImage(res.tempFilePaths)
					}
				})
			},
			uploadImage(list) {
				//多张图片地址，保存到一个数组当中
				var imgList = [];
				var that = this;
				var state = 0;//state记录当前已经上传到第几张图片
					new Promise(function (resolve, reject) {
						for (var i = 0; i < list.length; i++) {
							console.log("image.." +list[i])
							qiniuUploader.upload(list[i], (res) => {
								state++;
								that.imageList.push('http://'+res.imageURL)
								console.log("imageList"+JSON.stringify(that.imageList))
								imgList.push(res.key);
								//console.log("return image.." +JSON.stringify(res))
								//that.imgList.push()
								if (state == list.length) {
									resolve(imgList);
								}
							}, (error) => {
								reject('error');
								console.log('error: ' + error);
							}, {
									region: 'SCN', // 华北区
									uptokenURL: getBasicUrl()+"/api/tool/oss/token?expires="+3600,
									domain: 'p6urwinfd.bkt.clouddn.com',
									shouldUseQiniuFileName: true
								})
						}
					}).then(function (imgList) {
							addGallery({partyId: that.userId, imgUrls: imgList })
					})
			},
			 // 移除图片
			remove(index, e) {
			  e.stopPropagation(); //阻止
			  this.imageList.splice(index, 1);
			},
			previewImage() { //预览图片
				uni.previewImage({
					urls: this.imageList
				});
			},
			send() { //发送反馈
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";
	page {
		background-color: #EFEFF4;
	}

	.input-view {
		font-size: 28px;
	}
	
	.uploader__file .delete-btn {
		height: 28upx;
		width: 28upx;
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		background: #b4282d;
		text-align: center;
		font-size: 18upx;
		color: #fff;
		line-height: 28upx;
		border-radius: 50%;
	}
	
	.uni-uploader-body .file-remove {
      position: absolute;
      font-size: 12px;
      right: 5px;
      top: 1px;
      width: 14px;
      height: 14px;
      color: white;
      cursor: pointer;
      line-height: 12px;
      background: rgba(0, 0, 0, 0.25);
      z-index: 1000;
    }
    .uni-uploader-body .file-remove:after {
      display: inline;
    }
</style>
